<template>
    <div class="detail">
        <main class="content_box wrap">
            <div class="articleContent">
                <div class="articlDetail">
                    <h1>About Us</h1>
                    <p>FactAvenue.com aims to provide factual and relevant information across a variety of topics.</p>
                    <h2>Our Process</h2>
                    <p>Our goal is to deliver the highest quality content to our readers. We always strive to provide
                        you with the most accurate and useful facts across a variety of topics. While we may update or
                        edit some articles after they are published, our general editorial process is as follows:</p>
                    <ul>
                        <li>
                            Staff or freelance writers will thoroughly research a topic, write it, and submit it to the
                            Manager Editor.
                        </li>
                        <li>
                            The Managing Editor will review the article for any spelling, grammatical, or obvious
                            factual errors.
                        </li>
                        <li>
                            On relevant articles, the content will be further reviewed by someone from our team of
                            experts.
                        </li>
                        <li>
                            The content will then be published, along with a label of which expert reviewed it (if
                            applicable).

                        </li>
                    </ul>
                </div>
            </div>
            <div class="aside">
                <section class="relatedPosts">
                    <div class="categoryTitle">
                        <h2 class="heading">
                            Related Articles
                        </h2>
                    </div>
                    <article class="post subPosts" v-for="(item,index) in trendingArticles" :key="index">
                    <div class="media">
                        <router-link to="/" @click="toDeatil(item)" :title="item.newsTitle">
                                <div class="bgImg bgBox4 lazyloaded"
                                :data-bgset="`${item.imgUrl} 450w, ${item.imgUrl} 450w`"
                                        :data-bgsrc="item.imgUrl"
                                        :style="{'background-image':`url(${item.imgUrl})`}"
                                        data-sizes="(max-width: 135px) 100vw, 135px"
                                    >
                                </div>
                            </router-link>
                    </div>
                    <div class="postsText">
                            <h4 class="postsTitle">
                                <router-link to="/" @click="toDeatil(item)" >
                                        {{ item.newsTitle }}
                                    </router-link>
                            </h4>

                            <time class="postsDate" :datetime="item.publicTime">{{ item.publicTime }}</time>
                        </div>
                </article>
                </section>
                <div class="AFC">
                    AFC广告
                </div>
            </div>
        </main>

    </div>
</template>

<script setup>
import { ref, onMounted, inject } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { articleData } from '@/utils/common.js'

const route = useRoute()
const router = useRouter()
// 共享侧边栏
const trendingArticles = inject("trendingArticles")




const toDeatil = (item) => {
    let title = item.newsTitle.replaceAll(' ', '-')
    router.push(`/detail/${item.classfy}/${title}/${item.id}`)
}


</script>

<style lang="scss">
$text-color1: #1c1c1c;
$text-color2: #696575;
$text-color3: #45414b;

.detail {
    margin-top: 20px;

    .content_box {
        display: flex;
        justify-content: space-between;

        .articleContent {
            color: $text-color1;
            font-size: 18px;

            .articlDetail {
                h1.title {
                    color: $text-color2;
                    margin: 15px 0;
                    font-size: 36px;
                    line-height: 1.24;
                    letter-spacing: -0.005em;
                    font-weight: 500;
                    line-height: 1.2;
                }

                .author {
                    font-size: 12px;
                    letter-spacing: 1px;

                    .type {
                        letter-spacing: 1.5px;
                        font-weight: 700;
                    }
                }

                img {
                    margin: 20px 0;
                    width: 100%;
                    border-radius: 4px;
                    min-width: 300px;
                }

                p {
                    margin-bottom: 25px;
                }
                h1{
                    font-size: 2em;
                    margin-bottom: 25px;
                    color: $text-color3;
                }
                h2 {
                    font-size: 1.285em;
                    margin-bottom: 25px;
                    color: $text-color3;
                }

                h3 {
                    font-size: 1.125em;
                    color: $text-color3;
                    margin: 27px 0 15px 0;
                }

                ul {
                    margin: 28px 0 28px 35px;

                    li {
                        margin-bottom: 7px;
                        list-style: disc !important;

                        /* 使用实心点来表示列表项 */
                        &::marker {}
                    }

                }

                .subTitle {
                    a {
                        color: #336df4;
                    }
                }
            }
          
        }
    }
}
</style>